<template>
  <!--  /*-->
  <!--  通过从search视图接收到请求关键字，在这个结果展示视图里发起数据请求-->
  <!--  */-->
  <!-- 根据不同的类型进行不同的组件显示与否 -->
  <div id="container">
    <!-- 搜索类型的结果依据展示以及等有异步数据请求结果再展示 -->
    <video-container
      v-if="type === 'video' && searchVResult.datas.length !== 0"
      :videos="searchVResult.datas"
    />
    <!-- 搜索类型的结果依据展示以及等有异步数据请求结果再展示 -->
    <!-- <el-row :gutter="20"> -->
    <!-- <el-col :span="6" /> -->
    <!-- 专栏内容展示区 -->

    <!-- </el-row> -->
    <article-search-container
      v-if="type === 'article' && searchAResult.articles.length !== 0"
      :articles="searchAResult.articles"
    />
  </div>

  <!-- 文章列表分页组件 还没写数据请求-->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    v-model:current-page="current_Page"
    @current-change="handleCurrentChange"
  />
  <!-- :hide-on-single-page="true" -->
</template>

<script lang="ts">
// 导入API
import { defineComponent, reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import VideoContainer from "@/components/video/VideoContainer.vue";
import ArticleSearchContainer from "@/components/article/ArticleSearchContainer.vue";
// 导入自定义类
import { VideoSearch } from "@/api/model/video";
import { InitArticleList } from "@/api/model/article";
// 导入axios数据请求方法
import { searchApi } from "@/api/search";
import { articleApi } from "@/api/article";
import { videoApi } from "@/api/video";

export default defineComponent({
  components: {
    VideoContainer,
    ArticleSearchContainer,
  },
  props: {
    // 获取从路由传递过来的关键字
    keyword: String,
  },
  setup(props) {
    const route = useRoute();
    const current_Page = ref(1);
    // const total = ref(7);
    const state = reactive({
      pageSize: 20,
      page: 1,
      total: 0,
    });
    // 每一次路由进来都会执行该视图，所以type变量因路由params参数而变化
    const type = route.params.type;
    //  视频和文章的搜索的响应式数据
    const searchVResult = reactive(new VideoSearch());
    const searchAResult = reactive(new InitArticleList());

    // 不同类型进行不同的数据请求（避免切换到不同的搜索类型进行其他类型的数据请求）
    if (type === "video") {
      state.pageSize = 20;
      videoApi
        .getAllVideos({
          pageNum: 1,
          pageSize: state.pageSize,
          keyword: props.keyword!,
        })
        .then((response: any) => {
          console.log(response.data.data);
          searchVResult.datas = response.data.data.rows;
          state.total = Number(response.data.data.total);
          console.log("=========>", searchVResult.datas);
        })
        .catch((error: any) => {
          console.log(error);
        });
    } else if (type === "article") {
      state.pageSize = 4;
      console.log("进来了=====>", type);
      console.log("我有发请求了===========>");

      // const pageNum = 1;
      // const pageSize = 6;
      // const categoryId = 0;
      articleApi
        .getAllArticles({
          pageNum: 1,
          pageSize: state.pageSize,
          keyword: props.keyword!,
        })
        .then((res) => {
          console.log("搜索内容列表======>", res.data.data);
          // const data = res.data.data;
          // const { data } = res.data;
          searchAResult.articles = res.data.data.rows;
          // total.value = res.data.data.total;
          state.total = Number(res.data.data.total);
          console.log("==========>>>>>搜索文章内容", searchAResult.articles);
          console.log("==========>>>>>搜索文章总页数", state.total);
        })
        .catch((err) => {
          console.log(err);
        });

      searchApi
        .searchArticle({ keyword: props.keyword!, page: current_Page.value })
        .then((response: any) => {
          // searchResult对象的videos存储返回的搜索结果列表
          searchAResult.articles = response.data.data.result;
        })
        .catch((error: any) => {
          console.log(error);
        });
    }

    // 分页器的当前页改变所触发的函数（即再次发起新页面的请求）
    function handleCurrentChange(val: number) {
      // 直接取当前页数发送数据请求
      // console.log(current_Page.value);
      // console.log(`current page: ${val}`);

      if (type === "video") {
        console.log("当前页码======>", current_Page.value);

        videoApi
          .getAllVideos({
            pageNum: val,
            pageSize: state.pageSize,
            keyword: props.keyword!,
          })
          .then((response: any) => {
            console.log(response.data.data);
            searchVResult.datas = response.data.data.rows;
            state.total = Number(response.data.data.total);
            console.log("=========>", searchVResult.datas);
          })
          .catch((error: any) => {
            console.log(error);
          });
      } else if (type === "article") {
        articleApi
          .getAllArticles({
            pageNum: val,
            pageSize: state.pageSize,
            keyword: props.keyword!,
          })
          .then((res) => {
            console.log("搜索内容列表======>", res.data.data);
            // const data = res.data.data;
            // const { data } = res.data;
            searchAResult.articles = res.data.data.rows;
            // total.value = res.data.data.total;
            state.total = Number(res.data.data.total);
            console.log("==========>>>>>搜索文章内容", searchAResult.articles);
            console.log("==========>>>>>搜索文章总页数", state.total);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    }

    return {
      searchVResult,
      searchAResult,
      current_Page,
      handleCurrentChange,
      type,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped>
#container {
  /* 设置一个最小高度，作用：当内容过少时与分页器保持一定的距离 */
  min-height: 480px;
}

/* 分页组件样式 */
.el-pagination {
  margin: 15px auto;
  width: 393px;
}
</style>
